﻿
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>场馆详情</title>
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/amazeui.css">
    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    <link href="css/common.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.2.0/css/swiper.css">
    <script src="js/vue.js"></script>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/mui.min.js"></script>
    <script src="js/common.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <style>
        * {
            margin: 0;
            border: 0;
            padding: 0;
        }

        body {
            background: #fff;
            font-family: 微软雅黑;
        }

        .veads1_i1 {
            display: block;
            float: left;
            margin-top: 2%;
            width: 2.5%;
        }

        .veads1_s1 {
            display: block;
            text-align: center;
            font-size: 1.8rem;
        }

        .veas_02 {
            width: 100%;
            display: block;
            overflow: hidden;
            max-height: 12rem;
        }

        .veas2_i1 {
            width: 100%;
            display: block;
        }

        .veas_03 {
            overflow: hidden;
            padding: 3%;
            width: 100%;
            border-bottom: 1px solid #efefef;
        }

        .veas3_s1 {
            font-size: 1.5rem;
            color: #181818;
            display: block;
            font-weight: 600;
            margin-bottom: 2%;
        }

        .veas3_s2 {
            font-size: 1.4rem;
            color: #505050;
            display: block;
        }

        .mui-table-view-cell:after {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 1px;
            content: '';
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
            background-color: #c8c7cc;
        }

        .veas4_i1 {
            width: 5%;
            display: block;
            float: left;
        }

        .veas4_i2 {
            width: 40%;
            display: block;
            float: left;
            margin-top: 1%;
            margin-left: 5%;
            margin-right: 3%;
        }

        .veas4_s1 {
            font-size: 1.6rem;
            display: block;
            float: left;
            margin-top: 0.5%;
            margin-left: 5%;
        }

        .veas4_s2 {
            font-size: 1.4rem;
            display: block;
            float: left;
            margin-top: 1%;
        }

        .mui-table-view-cell {
            padding-top: 4%;
            padding-bottom: 4%;
        }

        .veas_04 {
            width: 100%;
            overflow: hidden;
        }

        .veas_05 {
            width: 100%;
            padding: 3% 3% 0 3%;
            overflow: hidden;
        }

        .yeas5_s1 {
            overflow: hidden;
            font-size: 1.7rem;
        }

        .veas5_d1 {
            height: 4rem;
            line-height: 4rem;
            overflow: hidden;
            float: left;
            margin-right: 3%;
        }

        .veas_06 {
            width: auto;
            overflow-x: auto;
            background: #f4f5f9;
            padding: 3% 0;
            padding-bottom: 1%;
        }

        .veas6_d1 {
            background: #fff;
            overflow: hidden;
            width: 8rem;
            border: 2px solid #efefef;
            border-radius: 5px;
            padding: 10% 5%;
            float: left;
        }

        .veas6_s1 {
            display: block;
            text-align: center;
            font-size: 1.3rem;
            font-weight: 600;
            line-height: 2rem;
        }

        .veas6_s2 {
            display: block;
            text-align: center;
            font-size: 1.2rem;
            color: #5e5e5e;
            line-height: 2.5rem;
        }

        .veas6_but1 {
            width: 90%;
            display: block;
            color: #0bc886;
            text-align: center;
            border-radius: 20px;
            font-size: 1.3rem;
            padding: 1%;
            margin: 0 auto;
        }

        .veas6_d2 {
            overflow: hidden;
        }

        ::-webkit-scrollbar {
            display: none;
        }

        .veas_07 {
            overflow: hidden;
            padding: 3% 3% 1% 3%;
            border-bottom: 1px solid #efefef;
        }

        .veas7_d1 {
            float: left;
            text-align: center;
        }

        .veas7_s1 {
            display: block;
            font-size: 1.8rem;
            line-height: 4rem;
        }

        .veas_08 {
            width: 100%;
            overflow: hidden;
        }

        .veas8_d1 {
            width: 100%;
            padding: 3% 5%;
            overflow: hidden;
            border-bottom: 1px solid #efefef;
        }

        .veas8_d2 {
            width: 70%;
            overflow: hidden;
        }

        .veas8_i1 {
            border-radius: 50%;
            width: 25%;
            display: block;
            float: left;
            margin-right: 5%;
        }

        .veas8_s1 {
            font-size: 1.6rem;
            font-weight: 600;
            display: block;
            margin-top: 3%;
            margin-bottom: 4%;
        }

        .veas8_s2 {
            font-size: 1.6rem;
            color: #747474;
            display: block;
            margin-top: 3%;
        }

        .veas8_s3 {
            display: block;
            width: 100%;
            margin-top: 5%;
        }

        .veas8_i2 {
            width: 40%;
            float: right;
            margin-top: -26%;
        }

        .veas8_d3 {
            float: right;
            margin-top: -8%;
        }

        .veas8_i3 {
            display: block;
            float: left;
            width: 45%;
            margin-top: 7%;
        }

        .veas8_s4 {
            display: block;
            float: left;
            color: #747474;
            margin-left: 9%;
        }

        .veas_09 {
            width: 100%;
            overflow: hidden;
        }

        .veas9_d1 {
            border-bottom: 1px solid #efefef;
            width: 100%;
            padding: 5% 10%;
        }

        .veas9_s1 {
            font-size: 1.8rem;
            display: block;
            margin-bottom: 4%;
        }

        .veas9_s2 {
            font-size: 1.7rem;
            margin-right: 4%;
        }

        .veas9_d2 {
            overflow: hidden;
            width: 100%;
            padding-left: 13%;
            margin-bottom: 2%;
        }

        .veas_10 {
            background: rgba(0,0,0,0.2);
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            z-index: 100000000;
        }

        .veas10_d1 {
            background: #fff;
            width: 100%;
            height: 75%;
            position: absolute;
            bottom: 0;
        }

        .veas10_d2 {
            width: 100%;
            padding: 3% 5%;
            overflow: hidden;
            border-bottom: 1px solid #d3d3d3;
        }

        .veas10_i1 {
            display: block;
            float: left;
            width: 3%;
            margin-top: 0.6%;
            margin-right: 10%;
        }

        .veas10_d3 {
            overflow: hidden;
            float: left;
            width: 25%;
            margin-right: 3%;
        }

        .veas10_s1 {
            height: 2.4rem;
            width: 50%;
            background: #efefef;
            border-radius: 3px;
            display: block;
            float: left;
            margin-right: 10%;
        }

        .veas10_s2 {
            display: block;
            float: left;
            width: 37%;
            margin-top: 4%;
            font-size: 1.2rem;
        }

        .veas10_d4 {
            overflow-y: auto;
            height: 50%;
            width: 100%;
        }

        .veas10_d5 {
            overflow: hidden;
            margin-top: 5%;
            padding-left: 15%;
        }

        .veas10_s3 {
            font-size: 1.2rem;
            display: block;
            margin-right: 2.6%;
            margin-bottom: 10%;
            margin-top: 11%;
            text-align: center;
        }

        .veas10_d6 {
            width: 100%;
            padding: 0 2%;
            overflow: hidden;
        }

        .veas10_s4 {
            font-size: 1.1rem;
            display: block;
            margin-right: 3.3%;
            width: 100%;
            /*margin-bottom: 0.8rem;*/
            height: 2.1rem;
            margin-bottom: 11.7%;
        }

        .veas10_s5 {
            display: block;
            height: 1.8rem;
            /*width: 9%;*/
            background: #efefef;
            border-radius: 5px;
            font-size: 1.1rem;
            text-align: center;
            color: #efefef;
            line-height: 1.8rem;
            float: left;
            margin-right: 1.8%;
            margin-bottom: 2%;
        }

        .veas10_d7 {
            padding: 3% 7%;
            width: 100%;
            margin-top: 1%;
        }

        .veas10_s6 {
            font-size: 2rem;
            display: block;
            margin-bottom: 3%;
        }

        .veas10_d8 {
            width: 10.5rem;
            border: 1px solid #23c788;
            overflow: hidden;
            padding-bottom: 0.3rem;
            float: left;
        }

        .veas10_s7 {
            display: block;
            font-size: 1.4rem;
            color: #727272;
            padding-left: 10%;
        }

        .veas10_s8 {
            display: block;
            color: #ff7676;
            font-size: 1.22rem;
            padding-left: 6%;
        }

        .veas10_i2 {
            display: block;
            float: right;
            margin-top: -20%;
            margin-right: 3%;
            width: 8%;
        }

        .veas10_d9 {
            overflow: hidden;
        }

        .veas10_d10 {
            overflow-x: auto;
        }

        .veas10_but {
            font-size: 1.8rem;
            text-align: center;
            color: #fff;
            background: #dadada;
            position: absolute;
            bottom: 0;
            border-radius: inherit;
            width: 100%;
            padding: 4% 0;
        }

        .veas10_s5_other {
            color: #fff;
            background: #23c788;
        }

        .other_veas10_d {
            height: 1.8rem;
            width: 90%;
            overflow: hidden;
            margin-right: 1.8%;
            margin-bottom: 9%;
            position: relative;
        }

        .other_veas10_s {
            height: 1.8rem;
            border-radius: 5px;
            font-size: 1.1rem;
            text-align: center;
            color: #efefef;
            line-height: 1.8rem;
            background: #23c788;
            position: absolute;
            display: none;
        }

        .veas10_but_other {
            background: #23c788;
        }

        .veas10_d11 {
            margin-bottom: 11.7%;
            border: 1px solid #efefef;
            background: #efefef;
            border-radius: 5px;
            height: 2.1rem;
        }

        .am-g_other {
            background: #23c788;
            color: #fff;
        }

        .vdts_s {
            border-radius: 5px;
            background: #efefef;
        }

        .vdts {
            width: 3.8rem;
        }

        .vedtls {
            background: #23c788;
            color: #fff;
            text-align: center;
            font-size: 0.8rem;
        }

        .veas10_other {
            width: 100%;
            height: 25%;
            position: absolute;
            top: 0;
        }

        .td_az1 {
            padding-top: 3rem;
        }

        .veas_05_active {
            color: #0bc886;
            border-bottom: 3px solid #0bc886;
        }
        .swiper-container {
            width: 100%;
            height: 100%;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .am-tabs{
            background: #fff;
        }
        .am-nav-tabs{
            border:1px solid #efefef;
            background: #fff;
        }
        .am-nav-tabs > li.am-active > a, .am-nav-tabs > li.am-active > a:hover, .am-nav-tabs > li.am-active > a:focus{
            border:none;
            border-bottom:1px solid #6fddb1;
        }
        .am-nav-tabs > li > a{
            padding: 10% 0;
        }
        .am-tabs-bd{
            border:none;
        }
        .swiper-slide{
            position: relative;
        }
    </style>
</head>
<body>
<div id="Allbody" v-cloak>
    <header data-am-widget="header" class="am-header am-header-default" style="background-color: #FFFFFF; border-bottom: 1px solid rgb(211, 211, 211);display: flex;justify-content:space-between;align-items:center">
        <div class="am-header-left am-header-nav">
            <a href=" " class="">
                <img class="am-header-icon-custom" src="images/veas07.png" alt="" />
            </a>
        </div>
        <h1 class="am-header-title" style=" color: black;width: 100%">星辰体育俱乐部</h1>
        <div class="am-header-right am-header-nav">
            <a href=" " class="">
                <img class="am-header-icon-custom" src="images/vult08.png" alt=""/>
            </a>
        </div>
    </header>
    <div class="veas_02">
        <!--<img src="images/veas01.png" alt="" class="veas2_i1">-->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="images/veas01.png" alt="" class="veas2_i1">
                    <span style="color: #fff;font-size: 1.6rem;position: absolute;display: block;top: 70%;left:1%;">星辰体育俱乐部</span>
                </div>
                <div class="swiper-slide"><img src="images/veas01.png" alt="" class="veas2_i1">
                <span style="color: #fff;font-size: 1.6rem;position: absolute;display: block;top: 70%;left:1%;">星辰体育俱乐部</span>
                </div>
                <div class="swiper-slide"><img src="images/veas01.png" alt="" class="veas2_i1">
                    <span style="color: #fff;font-size: 1.6rem;position: absolute;display: block;top: 70%;left:1%;">星辰体育俱乐部</span>
                </div>
                <div class="swiper-slide"><img src="images/veas01.png" alt="" class="veas2_i1">
                    <span style="color: #fff;font-size: 1.6rem;position: absolute;display: block;top: 70%;left:1%;">星辰体育俱乐部</span>
                </div>
                <div class="swiper-slide"><img src="images/veas01.png" alt="" class="veas2_i1">
                    <span style="color: #fff;font-size: 1.6rem;position: absolute;display: block;top: 70%;left:1%;">星辰体育俱乐部</span>
                </div>
                <div class="swiper-slide"><img src="images/veas01.png" alt="" class="veas2_i1">
                    <span style="color: #fff;font-size: 1.6rem;position: absolute;display: block;top: 70%;left:1%;">星辰体育俱乐部</span>
                </div>
                <div class="swiper-slide"><img src="images/veas01.png" alt="" class="veas2_i1">
                    <span style="color: #fff;font-size: 1.6rem;position: absolute;display: block;top: 70%;left:1%;">星辰体育俱乐部</span>
                </div>
                <div class="swiper-slide"><img src="images/veas01.png" alt="" class="veas2_i1">
                    <span style="color: #fff;font-size: 1.6rem;position: absolute;display: block;top: 70%;left:1%;">星辰体育俱乐部</span>
                </div>
                <div class="swiper-slide"><img src="images/veas01.png" alt="" class="veas2_i1">
                    <span style="color: #fff;font-size: 1.6rem;position: absolute;display: block;top: 70%;left:1%;">星辰体育俱乐部</span>
                </div>
                <div class="swiper-slide"><img src="images/veas01.png" alt="" class="veas2_i1">
                    <span style="color: #fff;font-size: 1.6rem;position: absolute;display: block;top: 70%;left:1%;">星辰体育俱乐部</span>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination" style="text-align: right">
            </div>
            <!-- Add Arrows -->
            <!--<div class="swiper-button-next"></div>-->
            <!--<div class="swiper-button-prev"></div>-->
        </div>
    </div>
    <div class="veas_03">
        <span class="veas3_s1">球场简介</span>
        <span class="veas3_s2">
                上海徐汇区星辰体育俱乐部是一个长13.40米，理
                想的羽毛球比赛场地是用弹性的木材拼接而成（只
                要不是把小木块竖着拼接即可）
            </span>
    </div>
    <div class="veas_04">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right" v-on:click="toMap()">
                    <img src="images/veas03.png" alt="" class="veas4_i1">
                    <span class="veas4_s1">{{ venueInfo["Adress"] }}</span>
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    <img src="images/veas02.png" alt="" class="veas4_i1">
                    <span class="veas4_s1">{{ venueInfo["Phone"] }}</span>
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a>
                    <img src="images/veas04.png" alt="" class="veas4_i1">
                    <img src="images/veas05.png" alt="" class="veas4_i2">
                    <span class="veas4_s2">{{ venueInfo["Score"] }}分</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="veas_05">
        <div class="veas5_d1" v-on:click="ChangeSport(index)" v-for="(venue,index) in venueInfo.VenueSport" v-bind:class="[index==SportIndex ? 'veas_05_active' : '', 'veas5_d1']">
            <span class="yeas5_s1">{{venue.Name }}</span>
        </div>
    </div>
    <div class="veas_06">
        <div class="am-scrollable-horizontal">
            <table class="am-table am-table-bordered am-table-striped am-text-nowrap" style="border: none;margin-bottom: 0">
                <tr style="border: none;">

                    <td style="border: none;background: #f4f5f9;padding-top: 0;padding-right: 0;" v-for="sport in timeItemList">
                        <div class="veas6_d1">
                            <span class="veas6_s1">{{sport.Week}}</span>
                            <span class="veas6_s2">{{sport.Time}}</span>
                            <button class="veas6_but1" v-on:click="Reservations(sport.time)">预订</button>
                        </div>
                    </td>

                </tr>
            </table>
        </div>
    </div>

    <div class="veas_05">
        <div class="veas5_d1">
            <span class="yeas5_s1">人次票</span>
        </div>
    </div>
    <div style="width: 100%">
        <div data-am-widget="list_news" style="margin-bottom: 0" class="am-list-news am-list-news-default am-no-layout">
            <div class="am-list-news-bd">
                <ul class="am-list" style="margin-bottom: 0">
                    <li style="border-top:none;" class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
                        <div class="am-u-sm-3 am-list-thumb" >
                            <a href="">
                                <img src="images/venuepic.png" style="    border-radius: 3px;">
                            </a>
                        </div>
                        <div class=" am-u-sm-9 am-list-main">
                            <div class="am-list-item-hd" style="    font-size: 1.8rem;">激情绽放“羽”你共享</div>
                            <div class="am-list-item-text" style="width: 65%">挥洒汗水为热爱运动的你，留下青春
                                的印记”</div>
                            <div class="am-list-item-text" style="float: right;margin-top: -23%;color: #f07737;font-size: 1.7rem">
                                ￥20
                            </div>
                            <div class="am-list-item-text" style="float: right;margin-top: -7%">
                                <span class="am-badge am-radius am-text-default" style="background: #0bc886;color: #fff;font-weight: 100">购买</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <div class="veas_06 veas_066">
        <div class="am-scrollable-horizontal">
            <table class="am-table am-table-bordered am-table-striped am-text-nowrap" style="border: none;margin-bottom: 0">
                <tr style="border: none;">
                    <td style="border: none;background: #f4f5f9;padding-top: 0;padding-right: 0;" v-for="list in Ticket">
                        <div class="veas6_d1 veas6_d11">
                            <span class="veas6_s1">{{list.Name}}</span>
                            <span class="veas6_s2">{{list.Pirce}}元/张</span>
                            <button class="veas6_but1" v-on:click="BuyTicket(list.gId)">购买</button>
                        </div>
                    </td>

                </tr>
            </table>
        </div>
    </div>
    <div class="am-tabs" data-am-tabs="{noSwipe: 1}" id="doc-tab-demo-1">
        <ul class="am-tabs-nav am-nav am-nav-tabs" style="background: #fff">
            <li class="am-active am-u-sm-6"><a  href="javascript: void(0)" style="color: #8f8f8f;text-align: center;    padding: 4%;">场地设施/服务</a></li>
            <li class=" am-u-sm-6"><a   href="javascript: void(0)" style="color: #8f8f8f;text-align: center;    padding: 4%;">场馆评论(12)</a></li>
        </ul>
        <div class="am-tabs-bd">
            <div style="padding: 0 1%" class="am-tab-panel am-active">
                <div class="veas_09">
                    <div class="veas9_d1">
                        <span class="veas9_s1">场地设施</span>
                        <div class="veas9_d2" v-for="Facilities in FacilitiesList">
                            <span class="veas9_s2" style="text-align: right">{{Facilities.name}}</span>
                            <span class="veas9_s2" style="text-align: left">{{Facilities.value}}</span>
                        </div>
                    </div>
                    <div class="veas9_d1">
                        <span class="veas9_s1">场地服务</span>
                        <div class="veas9_d2" v-for="Service in ServiceList">
                            <span class="veas9_s2" style="text-align: right">{{Service.name}}</span>
                            <span class="veas9_s2" style="text-align: left">{{Service.value}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="am-tab-panel">
                <div class="veas_08">
                    <div class="veas8_d1">
                        <div class="veas8_d2">
                            <img src="images/vult01.jpg" alt="" class="veas8_i1">
                            <span class="veas8_s1">随风飘扬</span>
                            <span class="veas8_s2">05月20日 13:00</span>
                        </div>
                        <span class="veas8_s3">场地是挨着的，有点挤。空调倒是适中</span>
                        <img src="images/veas05.png" alt="" class="veas8_i2">
                        <div class="veas8_d3">
                            <img src="images/veas06.png" alt="" class="veas8_i3">
                            <span class="veas8_s4">15</span>
                        </div>
                    </div>
                    <div class="veas8_d1">
                        <div class="veas8_d2">
                            <img src="images/vult01.jpg" alt="" class="veas8_i1">
                            <span class="veas8_s1">随风飘扬</span>
                            <span class="veas8_s2">05月20日 13:00</span>
                        </div>
                        <span class="veas8_s3">场地是挨着的，有点挤。空调倒是适中</span>
                        <img src="images/veas05.png" alt="" class="veas8_i2">
                        <div class="veas8_d3">
                            <img src="images/veas06.png" alt="" class="veas8_i3">
                            <span class="veas8_s4">15</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--<div class="swiper-slide" v-for="list in imgs">
        <img v-bind:src="list" alt="" class="veas2_i1" style="height:130px;">
        <span style="color: #fff;font-size: 1.6rem;position: absolute;display: block;top: 70%;left:1%;">{{ venueInfo["Name"] }}</span>
    </div>-->


    <transition enter-active-class="animated bounceInUp" leave-active-class="animated bounceOutDown">
        <div class="veas_10" v-if="isshow">
            <div class="veas10_other">

            </div>
            <div class="veas10_d1" id="veas10_d6_01">
                <div class="veas10_d2">
                    <img src="images/veas07.png" alt="" class="veas10_i1" v-on:click="closewindows()">
                    <div class="veas10_d3">
                        <span class="veas10_s1"></span>
                        <span class="veas10_s2">可选</span>
                    </div>
                    <div class="veas10_d3">
                        <span class="veas10_s1" style="background: #23c788"></span>
                        <span class="veas10_s2">已选</span>
                    </div>
                    <div class="veas10_d3">
                        <span class="veas10_s1" style="background: #ff7676"></span>
                        <span class="veas10_s2">已售</span>
                    </div>
                </div>

                <!--<div class="veas10_d4">
                    <div class="veas10_d6" id="">
                        <div class="am-scrollable-horizontal">
                            <table class="am-table am-table-bordered am-table-striped am-text-nowrap" style="border: none;margin-bottom: 0">
                                <tr style="border: none;">
                                    <td class="td_az1" style="border:none;background: #ffffff;padding-top: 3rem">
                                        <div class="vdts" style="width: 120%;float:left;margin-right: 1%;">
                                            <span class="veas10_s4">09:00-</span>
                                            <span class="veas10_s4">10:00-</span>
                                            <span class="veas10_s4">11:00-</span>
                                            <span class="veas10_s4">12:00-</span>
                                            <span class="veas10_s4">13:00-</span>
                                            <span class="veas10_s4">14:00-</span>
                                            <span class="veas10_s4">15:00-</span>
                                            <span class="veas10_s4">16:00-</span>
                                            <span class="veas10_s4">17:00-</span>
                                            <span class="veas10_s4">18:00-</span>
                                            <span class="veas10_s4">19:00-</span>
                                            <span class="veas10_s4">20:00-</span>
                                        </div>
                                    </td>


                                    <td style="border: none;background: #ffffff;padding-right: 0;" v-for="(list,index) in yudinglist">
                                        <div class="vdts">
                                            <span class="veas10_s3">{{list.Name}}</span>
                                            <div class="am-g veas10_d11" v-for="ii in yudinglist[index].FieldState">
                                                <div class="am-u-sm-1" style="font-size: 0.9rem;width: 100%;padding: 1% 0;text-align: center;color: #efefef;" v-on:click="choseSportTime(ii)" v-bind:style="{ 'background-color': (ii.State==0?'#EFEFEF':(ii.State==1?'#FF7676':'#23C788'))}">{{ii.Price}}元</div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>-->

                <div class="veas10_d4">
                    <div class="am-g am-g-fixed veas10_d6" id="">
                        <div class="am-u-sm-2" style="padding-right: 0">
                            <div style="border:none; font-size:11px;margin-top:25px;">
                                <div style="height:29px;width:100%;line-height:25px;">09:00-</div>
                                <div style="height:29px;width:100%;line-height:25px;">10:00-</div>
                                <div style="height:29px;width:100%;line-height:25px;">11:00-</div>
                                <div style="height:29px;width:100%;line-height:25px;">12:00-</div>
                                <div style="height:29px;width:100%;line-height:25px;">13:00-</div>
                                <div style="height:29px;width:100%;line-height:25px;">14:00-</div>
                                <div style="height:29px;width:100%;line-height:25px;">15:00-</div>
                                <div style="height:29px;width:100%;line-height:25px;">16:00-</div>
                                <div style="height:29px;width:100%;line-height:25px;">17:00-</div>
                                <div style="height:29px;width:100%;line-height:25px;">18:00-</div>
                                <div style="height:29px;width:100%;line-height:25px;">19:00-</div>
                                <div style="height:29px;width:100%;line-height:25px;">20:00-</div>
                                <div style="height:29px;width:100%;line-height:25px;">21:00-</div>
                            </div>
                        </div>
                        <div class="am-u-sm-10">
                            <div class="am-scrollable-horizontal">
                                <table class="am-table-bordered am-table-striped am-text-nowrap" style="border: none;margin-bottom: 0">
                                    <tr style="border: none;">
                                        <td style="background: #ffffff;padding: 0;width: 50px;font-size:12px;border: none;" v-for="(list,index) in yudinglist">
                                            <div class="vdts">
                                                <div class="" style="height:30px;font-size:10px;font-weight:500;line-height:30px;text-align: center">{{list.Name}}</div>
                                                <div class="" style="height:30px;padding:5%;" v-for="ii in yudinglist[index].FieldState">
                                                    <span style="display: block; width: 100%; height: 100%; text-align: center; line-height: 25px; " class="vdts_s" v-on:click="choseSportTime(ii)" v-bind:style="{ 'background-color': (ii.State==0?'#EFEFEF':(ii.State==1?'#FF7676':'#23C788'))}">{{ii.Price}}元</span>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!--veas10_01.id-->


                <div class="veas10_d7">
                    <span class="veas10_s6">已选座位</span>
                    <div class="veas10_d10">
                        <div class="veas10_d9">
                            <div class="am-scrollable-horizontal">
                                <table class="am-table am-table-bordered am-table-striped am-text-nowrap" style="border: none;margin-bottom: 0">
                                    <tr style="border: none;">
                                        <td style="border: none;background: #ffffff;padding-top: 0;padding-right: 0;" v-for="array in sportarray">
                                            <div class="veas10_d8">
                                                <div class="vedtls">
                                                    {{array.startTime}}
                                                </div>
                                                <span class="veas10_s7">{{array.fieldName}}</span>
                                                <span class="veas10_s8">￥{{array.Price}}</span>
                                                <img src="images/veas08.png" alt="" class="veas10_i2" v-on:click="choseSportTime(array)">
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <button class="veas10_but" v-if="sportarray.length>0" style="background-color:#23C788" v-on:click="sureSubmit()">确定</button>
                <button class="veas10_but" v-if="sportarray.length==0" disabled="disabled">确定</button>
            </div>
        </div>
    </transition>

</div>
</body>
</html>
<script src="js/zishiying.js"></script>
<script src="https://use.fontawesome.com/ca6b609d64.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
<script src="js/common.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script>
<script src="https://cdn.bootcss.com/amazeui/2.7.2/js/amazeui.js"></script>
<script src="https://cdn.bootcss.com/Swiper/4.2.0/js/swiper.js"></script>
<script>
    $(function () {
        if (window.screen.height <= 480 && window.screen.width <= 320) {
            $('.veas10_d1').css('height', '85%');
        }
        else {
            $('.veas10_d1').css('height', '75%');
        }
        var swiper = new Swiper('.swiper-container', {
            pagination: {
                el: '.swiper-pagination',
                type: 'fraction',
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    });

    //setTimeout(function () {
    //    var swiper = new Swiper('.swiper-container', {
    //        pagination: {
    //            el: '.swiper-pagination',
    //            type: 'fraction',
    //        }
    //    });
    //}, 100)
</script>
<script>
    var Allbody = new Vue({
        el: '#Allbody',
        data: {
            venueInfo: {},
            venueid: "1748669c28d1452b9a960d2e38c5ecbe",
            SportList: {},
            SportIndex: -1,//运动项目下标
            timeItemList: {},//时间
            FacilitiesList: {},//设施
            ServiceList: {},//服务
            xPoint: "",
            yPoint: "",
            sportId: 0,//运动项目Id
            //date:"",
            isshow: false,//是否显示弹框
            yudinglist: [],//场地数组
            FieldState: {},//当前选中的场次
            sportarray: [],//场地选择数组
            isshowchoose: false,
            Ticket:[],//人次票
            //model:''
        },
        methods: {
            getInfo: function () {
                var that = this;
                $.ajax({
                    type: 'POST',
                    url: window.apiUrl + '/Api/Field/VenueInfo',
                    data: { "venueid": that.venueid },
                    success: function (data) {
                        console.log(data);
                        if (data.errcode == 0) {
                            data = data.data.venueInfo;
                            that.venueInfo = data;
                            that.xPoint = data.xPoint;
                            that.yPoint = data.yPoint;
                            that.SportList = data.VenueSport;
                            that.SportIndex = 0;
                            that.Ticket = data.Ticket;
                            //获取日期列表的宽度
                            var x, c, v, b, n, m;
                            var a, s, d, f, g, h;
                            $(function () {
                                m = $('.veas6_d2 .veas6_d11:last').index() + 1;
                                b = $('.veas6_d11').css('width');
                                n = parseInt(b) * m;
                                c = $('.veas6_d11').css('margin-right');
                                x = $('.veas_066').css('padding-left');
                                v = parseInt(c) * m + parseInt(x);
                                $('.veas6_d2').css('width', n + v);
                            });
                        } else {
                            alert(data.errmsg);
                        }
                    },
                    error: function () {
                        alert("服务器加载异常");
                    }
                })
            },
            ChangeSport: function (index) {
                this.SportIndex = index;
            },
            choseSportTime: function (ii) {
                this.FieldState = ii;
                if ($.inArray(this.FieldState, this.sportarray) < 0) {
                    if (this.FieldState.State == 0) {
                        this.FieldState.State = 2;
                        this.sportarray.push(this.FieldState);
                    }
                }
                else {
                    //console.log($.inArray(this.FieldState,this.sportarray));
                    this.FieldState.State = 0;
                    this.sportarray.splice($.inArray(this.FieldState, this.sportarray), 1);
                }
                //console.log(this.sportarray.length);
            },
            Reservations: function (date) {
                var that = this;
                that.sportarray = [];
                that.FieldState = {};
                //that.date = date;
                $.ajax({
                    type: 'POST',
                    url: window.apiUrl + '/Api/Field/FieldState',
                    data: { "venueSportId": this.sportId, "date": date },
                    success: function (data) {
                        that.yudinglist = data.data.field;
                        //console.log(data.data.field[0]);
                        that.isshow = true;

                    },
                    error: function () {
                        alert("服务器加载异常");
                    }
                })
            },
            closewindows: function () {
                this.isshow = false;
            },
            toMap: function () {
                if (this.xPoint == "" || this.yPoint == "") {
                    alert("地址无效");
                }
                else {
                    location.href = 'map.html?xPoint=' + this.xPoint + "&yPoint=" + this.yPoint;
                }
            },
            BuyTicket:function(ticketgid){
                location.href = 'BuyTicket.html?TicketgId=' + ticketgid;
            },
            sureSubmit: function () {
                var sportarrayId = [];
                for (var i = 0; i < this.sportarray.length; i++) {
                    sportarrayId.push(this.sportarray[i].Id);
                }
                var str = "?fieldStates=" + sportarrayId.join("&fieldStates=");
                console.log(str);

                $.ajax({
                    type: 'POST',
                    url: apiUrl + '/Api/Field/createOrder' + str,
                    success: function (data) {
                        if (data.errcode == 0) {
                            //console.log(data.data.Id);
                            location.replace("orderdetails.html?Id=" + data.data.Id);
                        }
                        else {
                            alert(data.errmsg);
                        }
                    },
                    error: function () {
                        alert("服务器加载异常");
                    }
                })

            }
        },
        watch: {
            SportIndex: function () {
                var data = this.venueInfo;
                //this.SportIndex = index;
                this.timeItemList = data.VenueSport[this.SportIndex].timeItem;
                this.FacilitiesList = data.VenueSport[this.SportIndex].Facilities;
                this.ServiceList = data.VenueSport[this.SportIndex].Service;
                this.sportId = data.VenueSport[this.SportIndex].Id;
                //获取日期列表的宽度
                var x, c, v, b, n, m;
                var a, s, d, f, g, h;
                $(function () {
                    m = $('.veas6_d2 .veas6_d11:last').index() + 1;
                    b = $('.veas6_d11').css('width');
                    n = parseInt(b) * m;
                    c = $('.veas6_d11').css('margin-right');
                    x = $('.veas_066').css('padding-left');
                    v = parseInt(c) * m + parseInt(x);
                    $('.veas6_d2').css('width', n + v);
                });
            }
        },
    });

    $(function () {
        var venueid = $.getParam("venueid");
        Allbody.venueid = venueid;
        Allbody.getInfo();


    })
</script>
